<template>
	<view class="conversionLink">
		<u-navbar
			back-text="转链"
			:background="{
				background: 'transparent'
			}"
		></u-navbar>
		<view class="link">
			<image v-if="ischange" :src="img" mode="" style="width: 282rpx; height: 282rpx;"></image>
			<view class="inputbox"><u-input v-model="value" type="textarea" :height="340" :clearable="false" :border="false" :maxlength="99999" /></view>
		</view>
		<view class="" style="margin:0 10px;font-size: 24rpx;">
			<text style="color: #F2682C;">提示：</text>
			<text>通过转换后链接所产生的订单才能计入到您的佣金中</text>
		</view>
		<view class="" style="margin: 60rpx 40rpx 0;">
			<view v-if="!ischange" class="btnsbox u-flex u-row-between u-col-center">
				<view class="btn u-flex u-row-center u-col-center" @click="handle">
					<text class="iconfont icon-link" style="font-size: 50rpx;margin-right: 40rpx;"></text>
					<text>转链</text>
				</view>
				<view class="btn2 u-flex u-row-center u-col-center" @click="doclear">
					<u-icon name="reload" color="#BFBFBF" :size="60" style="margin-right: 40rpx;"></u-icon>
					<text>清空</text>
				</view>
			</view>
			<view class="changed" v-else>
				<view class="copybtn u-flex u-row-center u-col-center" @click="docopy">
					<text class="iconfont icon-copy" style="font-size: 60rpx;margin-right: 40rpx;"></text>
					<text>复制</text>
				</view>
				<view class="shopbtn u-flex u-row-center u-col-center">
					<text class="iconfont icon-shop" style="font-size: 60rpx;margin-right: 40rpx;"></text>
					<text>购买商品</text>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
	</view>
</template>

<script>
export default {
	name: 'conversionLink',
	data() {
		return {
			scrollTop:0,
			value: '',
			ischange: false,
			img: '',
			goodsUrl: '',
			couponUrl: '',
			newurl: '',
			skuid: ''
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {},
	//挂载开始之前被调用
	beforeMount() {},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	onPageScroll(obj) {
		// console.log(obj);
		this.scrollTop = obj.scrollTop;
	},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		dosave(url) {
			let that = this;
			uni.getSetting({
				success(res) {
					uni.downloadFile({
						url: url,
						success: res => {
							if (res.statusCode === 200) {
								console.log('MP', res.tempFilePath);
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: res => {
										that.$refs.uToast.show({
											title: '已保存至手机',
											type: 'success'
										});
									},
									fail: err => {
										that.$refs.uToast.show({
											title: '保存失败',
											type: 'error'
										});
									}
								});
							}
						},
						fail: res => {
							that.$refs.uToast.show({
								title: '下载失败',
								type: 'error'
							});
						}
					});
				}
			});
		},
		doclear() {
			this.value = '';
			this.img = '';
		},
		docopy() {
			this.dosave(this.img);
			uniCopy({
				content: this.value,
				success: res => {
					uni.showToast({
						title: res,
						icon: 'none'
					});
				},
				error: e => {
					uni.showToast({
						title: e,
						icon: 'none',
						duration: 3000
					});
				}
			});
		},
		httpString(s) {
			// var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
			//var reg = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
			//var reg=/(http(s)?\:\/\/)?(www\.)?(\w+\:\d+)?(\/\w+)+\.(swf|gif|jpg|bmp|jpeg)/gi;
			//var reg=/(http(s)?\:\/\/)?(www\.)?(\w+\:\d+)?(\/\w+)+\.(swf|gif|jpg|bmp|jpeg)/gi;
			var reg = /(https?|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g;
			//var reg= /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/;
			//v = v.replace(reg, "<a href='$1$2'>$1$2</a>"); //这里的reg就是上面的正则表达式
			//s = s.replace(reg, "$1$2"); //这里的reg就是上面的正则表达式
			s = s.match(reg);
			// console.log(s);
			return s;
		},
		handle() {
			// 			this.value = `釉下彩手工描绘，日式和风雅致，让生活更具品质，让你爱上吃饭！瓷润透轻盈，加厚防烫，方便端拿，耐高温，抗腐蚀，安全无铅镉，放心使用！微波炉，烤箱、洗碗机都适用。
			// 【薇娅推荐】釉下彩日式千叶草碗盘套装16件套【爆款补卷】
			// 京东价：139.9元
			// 券后价：29.9元
			// 领券：http://coupon.m.jd.com/coupons/show.action?key=a27359626a5644f8926952458897a01f&roleId=44274734&to=item.jd.com/10023638452954.html
			// 抢购：http://item.jd.com/10023638452954.html`;
			console.log(this.value);
			// console.log(this.httpString(this.value));
			let array = this.httpString(this.value);
			console.log(array[0].indexOf('coupon'));
			if (array[0].indexOf('coupon') !== -1) {
				this.couponUrl = array[0];
				this.goodsUrl = array[1];
			} else {
				this.couponUrl = array[1];
				this.goodsUrl = array[0];
			}
			this.skuid = this.goodsUrl.replace(/[^0-9]/gi, '');
			console.log(this.skuid);
			this.$u.api
				.getGoodsInfo({
					skuIds: this.skuid
				})
				.then(res => {
					console.log(res.data);
					this.img = res.data[0].imgUrl;
					this.doChangeLink();
				})
				.catch(err => {
					console.log(err);
				});
		},
		doChangeLink() {
			this.$u.api
				.doChangeLink({
					materialId: this.goodsUrl
					// couponUrl: this.couponUrl
				})
				.then(res => {
					// console.log(res);
					this.newurl = res.data.shortURL;
					let str = this.value;
					let index = str.indexOf('领券：http://coupon.m.jd.com');
					// console.log('index', index);
					str = str.slice(0, index);
					// console.log('str', str);
					str += '抢购：' + this.newurl;
					this.value = str;
					this.ischange = true;
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.conversionLink {
	.link {
		.inputbox {
			background-color: rgba(191, 191, 191, 0.18);
			border-radius: 12rpx;
			padding: 20rpx;
			margin: 10px;
		}
	}
	.btnsbox {
		.btn {
			width: 48%;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #f2682c;
			border-radius: 40rpx;
			color: #ffffff;
			font-weight: 600;
			box-shadow: 0px 0px 12rpx 0px rgba(242, 104, 44, 100);
			font-size: 60rpx;
		}
		.btn2 {
			width: 48%;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #e6e6e6;
			border-radius: 40rpx;
			color: #bfbfbf;
			font-weight: 600;
			box-shadow: 0px 0px 12rpx 0px #e6e6e6;
			font-size: 60rpx;
		}
	}
	.changed {
		font-size: 36rpx;
		.copybtn {
			color: #84300b;
			font-weight: 600;
			border-radius: 60rpx;
			background-color: rgba(219, 76, 14, 0.29);
		}
		.shopbtn {
			color: #f2682c;
			font-weight: 600;
			border-radius: 60rpx;
			background-color: #ffffff;
			margin-top: 30rpx;
			border: 2rpx solid #f2682c;
		}
	}
}
</style>
